<template>
  <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>门禁管理</el-breadcrumb-item>
                <el-breadcrumb-item>开放时间列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-row>
        <el-row :gutter="10">
            <el-col :span='4'>
                <el-input v-model="table.queryKey" @keyup.enter.native="getTableData" size="small" placeholder="输入名称查询" suffix-icon="el-icon-search"/>
            </el-col>
        </el-row>

        <!--表格-->
        <el-row  class="bone-top-10" v-show='!form.isShow'>
            <el-table :data='table.tableData' border stripe style='width:100%' size="small" :highlight-current-row="true" ref="multipleTable">
                <el-table-column width="80" label="编号" prop='openTimeId'></el-table-column>
                <el-table-column width="100" label="名称" prop='name'></el-table-column>
                <el-table-column width="100" label="门" prop='doorName'></el-table-column>
                <el-table-column width="100" label="门内序号" prop='orderNum'></el-table-column>
                <el-table-column width="100" label="门禁" prop='accessName'></el-table-column>
                <el-table-column width="100" label="部门" prop='deptName'></el-table-column>
                <el-table-column width="100" label="到期时间" prop='endDate'></el-table-column>
                <el-table-column width="150" label="时间段">
                    <template slot-scope='scope'>
                        <span>{{scope.row.startTime}} - {{scope.row.endTime}}</span>
                    </template>
                </el-table-column>
                <el-table-column width="100" label="识别方式" prop='opModeStr'></el-table-column>
                <el-table-column width="150" label="星期" prop='weekday'></el-table-column>
                <el-table-column width="150" label="创建时间" prop='createTime'></el-table-column>
                <el-table-column fixed='right' min-width="200" label="操作">
                    <template slot-scope='scope'>
                        <span v-if='form.deptId==scope.row.deptId'>
                            <el-button type="text" @click='bindCard(scope.row)'>绑定门卡</el-button>
                        </span>
                        <span style='margin-left:10px;'>
                            <el-button type="text" @click='lookCard(scope.row)'>查看门卡</el-button>
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination' @current-change="handleCurrentChange" 
            :current-page="this.table.currentPage" :page-size="this.table.pageSize" 
            layout="total, prev, pager, next, jumper" :total="this.table.rowCount"></el-pagination>
        </el-row>

        <!--绑定门卡弹窗-->
        <el-dialog title="绑定门卡"
        :visible.sync='bindCardDialog.dialog'
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        width='700px'>
            <el-form :model='bindCardDialog.form' :rules='bindCardDialog.form.rules' ref='bindCardForm'
            size='small' label-width="80px" label-position="right">
                 <el-form-item label='门卡'>
                    <el-checkbox-group v-model="bindCardDialog.form.bindCardId">
                        <el-checkbox v-for='item in bindCardDialog.form.cards' 
                        :key='item.cardId' border size='small' class='item-float' 
                        :label="item.cardId">{{item.cardDevId}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item> 
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="bindCardDialog.dialog = false">取 消</el-button>
                <el-button size="small" type="primary" @click="submitBindCard" :disabled='bindCardDialog.form.submitDisabled'>确 定</el-button>
            </span>
        </el-dialog>

        <!--查看绑定门卡弹窗-->
        <el-dialog title="绑定门卡"
        :visible.sync='lookCardDialog.dialog'
        :close-on-click-modal='false'
        :close-on-press-escape='false'
        width='700px'>
            <el-table :data='lookCardDialog.table.tableData' border stripe 
            style='width:100%' size="small" :highlight-current-row="true" ref="cardTable">
                <el-table-column width="100" label="编号" prop='cardId'></el-table-column>
                <el-table-column min-width="120" label="设备号" prop='devId'></el-table-column>
                <el-table-column width="120" label="部门" prop='deptName'></el-table-column>
                <el-table-column width="120" label="人员" prop='empName'></el-table-column>
                <el-table-column width="150" label="创建时间" prop='createTime'></el-table-column>
            </el-table>
            <el-pagination class='bone-top-10 my-el-pagination' @current-change="cardCurrentChange" 
            :current-page="lookCardDialog.table.currentPage" :page-size="lookCardDialog.table.pageSize" 
            layout="total, prev, pager, next, jumper" :total="lookCardDialog.table.rowCount"></el-pagination>
        </el-dialog>

  </div>
</template>

<script>
import Http from "@/components/utils/httpUtil"
export default {
  data(){
      return {
          form: {
              deptId: '',
          },
          table: {
            queryKey: '',
            tableData: [],
            currentPage: 1,
            pageSize:10,
            rowCount: 0
          },
          bindCardDialog: {
              dialog: false,
              form: {
                bindCardId:[],
                timeId:'',
                cards:[],
                rules: {},
                submitDisabled: false
              }
          },
          lookCardDialog: {
              dialog: false,
              table: {
                tableData: [],
                timeId: '',
                currentPage: 1,
                pageSize:10,
                rowCount: 0
              }
          }
      }
  },
  methods:{
      init(){
        let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        this.form.deptId = userInfo.deptId
      },
      //table翻页
      handleCurrentChange(val){
        this.table.currentPage = val;
        this.getTableData();
      },
      //门卡弹窗table翻页
      cardCurrentChange(val){
        this.lookCardDialog.table.currentPage = val;
        this.getCardTable()
      },
      //获取table数据
      getTableData(){
        let p = {};
        let url = '/doorOpenTime/listQuery'
        p.start = (this.table.currentPage - 1) * this.table.pageSize;
        p.num = this.table.pageSize;
        p.name = this.table.queryKey;
        Http.fetch(url, p)
        .then(res => {
            this.table.tableData = res.data.rows;
            this.table.rowCount = res.data.total;
        })
      },
      //绑定门卡 - 界面
      bindCard(row){
        this.bindCardDialog.dialog = true
        this.bindCardDialog.form.timeId = row.openTimeId
        this.bindCardDialog.form.bindCardId = []
      },
      //绑定门卡 - 数据提交
      submitBindCard(){
        this.bindCardDialog.form.submitDisabled = true
        let p = {}
        let url = '/doorOpenTime/bindMultiCard'
        p.timeId = this.bindCardDialog.form.timeId
        p.cardIdList = this.bindCardDialog.form.bindCardId
        Http.fetch(url,p)
        .then(res=>{
            this.bindCardDialog.form.submitDisabled = false
            this.bindCardDialog.dialog = false
            this.$message({
                showClose: true,
                message: res.sucMsg,
                type: "success"
            });
        })
        .catch(err=>{
            this.$message({
                showClose: true,
                message: err.errMsg,
                type: "error"
            });
            this.bindCardDialog.form.submitDisabled = false
        })
      },

      //查看门卡 - 界面
      lookCard(row){
        this.lookCardDialog.table.timeId = row.openTimeId
        this.lookCardDialog.table.tableData = []
        this.lookCardDialog.dialog = true
        this.getCardTable()
      },

      //查看门卡 - 数据获取
      getCardTable(){
        let p = {}
        let url = '/doorCard/listByTimeId'
        p.timeId = this.lookCardDialog.table.timeId
        p.start = (this.lookCardDialog.table.currentPage - 1) * this.lookCardDialog.table.pageSize;
        p.num = this.lookCardDialog.table.pageSize;
        Http.fetch(url,p)
        .then(res=>{
            this.lookCardDialog.table.tableData = res.data.rows
            this.lookCardDialog.table.rowCount = res.data.total
        })
      },

      //获取本部门下的门卡
      getMyDeptCards(){
        let p = {}
        let url = '/doorCard/listAll'
        Http.fetch(url,p)
        .then(res=>{
            this.bindCardDialog.form.cards = res.data
        })
      },

  },
  mounted(){
      this.init()
      this.getTableData()
      this.getMyDeptCards()
  }
}
</script>

<style>
.expireTime .el-input__inner{
    text-align: center !important;
}
.item-float{
    margin-right: 10px;
    margin-bottom: 10px;
}
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
    margin-left: 0px;
}
</style>
